<template>
  <div>
    <div class="list-btn">
      申请时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="show = true;">充值</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      title="充值"
      width="680px"
      :footer-hide="true"
      :closable="false"
      :mask-closable="false"
     >
      <Form ref="formRole" :model="formRole" :rules="rules"  :label-width="110">
        <FormItem label="商户名称">
          <Input v-model.trim="formRole.name"  style="width: 300px" disabled/>
        </FormItem>
         <FormItem label="账户余额(元)">
          <Input v-model.trim="formRole.restMoney" style="width: 300px" disabled/>
        </FormItem>
         <FormItem label="充值方式">
          <Input v-model.trim="formRole.payWay" style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="银行卡号" prop="bank_card">
          <Input v-model.trim="formRole.bank_card"  placeholder="请输入银行卡号" style="width: 300px" :maxlength="20" clearable/>
        </FormItem>
        <FormItem label="汇款公司" prop="company">
          <Input v-model.trim="formRole.company"  placeholder="请输入汇款公司" style="width: 300px" :maxlength="25" clearable/>
        </FormItem>
        <FormItem label="充值金额(元)" prop="amount">
         <Input v-model.trim="formRole.amount"  placeholder="请输入充值金额" style="width: 300px" :maxlength="7"  clearable/>
        </FormItem>
        <FormItem label="上传凭证" prop="image">
           <Upload
            :action = "uploadUrl"
            :show-upload-list="false"
            name="uploadFile"
            :before-upload="handleUpload"
            :on-success="handleSuccess"
            accept="image/*"
            :on-error='handleError'
            v-model="formRole.image"
            :headers="headers"
            :max-size="2048"
            :on-exceeded-size="handleMaxSize"
            >
            <div class="picture">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <Icon type="ios-add" size="80" v-else></Icon>
            </div>
          </Upload>
          <p v-if="imageUrl" style="cursor:pointer;color:#2d8cf0;font-size:14px;" @click="visible = true;img = imageUrl">查看图片</p>
        </FormItem>
      <div style="text-align:right">
        <Button @click="show = false;imageUrl='';resetValidate('formRole');formRole.bank_card = '';company = '';amount = '';" style="margin-right:2px">取消</Button>
        <Button type = "primary" @click="submitModal">确定</Button>
      </div>
      </Form>
    </Modal>
    <Modal title="查看图片" v-model="visible"  class="viewImg"  :footer-hide="true">
      <img :src="img" v-if="visible">
      <div style="text-align:right">
        <Button type = "primary" @click="visible =false" >关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import {zeroType,bankType} from '../../../js/rules'
  import base64 from 'js-base64'
  let Base64 = base64.Base64
  let Authorization = 'Basic '+Base64.encode(sessionStorage.getItem('tokenId')+':'+sessionStorage.getItem('token'))
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data () {
      return {
        tag: {
          'title': '充值记录',
          'path': '/work/expense/recharge'
        },
       show:false,
       formRole:{},
       imageUrl:'',
       uploadUrl: `${this.$http.defaults.baseURL}/merchant/photo`,
       img:'',
       visible:false,
       rules:{
          bank_card: [
            { required: true, message: '请输入正确的银行卡号', trigger: 'blur',validator:bankType}
          ],
          company: [
            { required: true, message: '请输入汇款公司', trigger: 'blur'}
          ],
          amount: [
            { required: true, message: '请输入正整数', trigger: 'blur',validator:zeroType}
          ],
          image: [
            { required: true, message: '请选择图片', trigger: 'blur' }
          ],
       },
       headers:{
          "ua":'1;1.0.0;API0;web',
          "Authorization":Authorization
       },
       listTitle: [
        {
          title: "申请时间",
          key: "add_time",
          align: "center",
          minWidth:150,
          render: (h, params) => {
            return h("div", params.row.add_time)
          }
        },
        // {
        //   title: "订单ID",
        //   key: "order_id",
        //   align: "center",
        //   minWidth:80,
        // },
        {
          title: "商户名称",
          key: "merchant",
          align: "center",
          minWidth:100,
        },
        {
          title: "银行卡号",
          key: "bank_card",
          align: "center",
          minWidth:120,
          render:(h,parmas) => {
            let card = parmas.row.bank_card;
            let ncard = '';
            for(var n=0;n<card.length;n=n+4){
              ncard += card.substring(n,n+4)+" ";
            }
            return h('div',ncard)
          }
        },
        {
          title: "汇款公司",
          key: "company",
          align: "center",
          minWidth:100,
        },
         {
          title: "充值金额(元)",
          key: "amount",
          minWidth:80,
          align: "center",
          render: (h, params) => {
            return h('div', this.toYuan(params.row.amount))
          }
        },
        {
          title: "充值凭证",
          key: "image",
          align: "center",
          minWidth:160,
          render:(h,params) => {
            return h('img',
              {
                attrs: {
                  src:params.row.image,
                },
                style:{
                  width:'80px',
                  height:'38px',
                  textAlign:'center',
                  verticalAlign:'middle'
                },
                on:{
                  click:() => {
                    this.visible = true;
                    this.img = params.row.image;
                  }
                }
            })
          }
        },
         {
          title: "充值方式",
          key: "image",
          align: "center",
          minWidth:100,
          render:(h,params) => {
            return h('div','银行汇款')
          }

        },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth:80,
          render:(h,params) => {
            let color = '';
            let text = '';
            switch(params.row.status){
              case '1':
                color = '#f90';
                text = '待审核';
                break;
              case '2':
                color = '#19be6b';
                text = '审核通过';
                break;
              case '3':
                color = '#ed4014';
                text = '审核拒绝';
                break;
            }
            return h('div',{
              style:{
                color:color
              }
            },text)
          }
        },
              {
          title: "拒绝原因",
          key: "reason",
          align: "center",
          minWidth:120,
          className:'ellipsis',
          render:(h,params) => {
            if(params.row.reason){
              return h('Tooltip',
              {
                props:{
                  'max-width':200,
                  'content':params.row.reason
                }
              },
              [
                h('div',
                {
                  attrs:{
                    class:'ellipsis'
                  }

                },params.row.reason)
              ])
            }else{
               return h('div', '—' )
            }
          }
        },
      ],
      list:[],
        url:'/merchant/payList',
        nameListUrl: '',
        params: {
          page: 1,
          pageSize: 10
        },
      }
    },
    mounted() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo(){
       this.$get('/merchant/info')
        .then((res) => {
          console.log(res,"用户信息");
          if(res.code === 0){
            this.formRole.restMoney = this.toYuan(res.data.amount);
            this.formRole.payWay = '银行汇款';
            this.formRole.name = res.data.name
            // this.account=res.data.userNameCN;
            // sessionStorage.setItem('adminid',res.data.id)
          }
        })
      },
      submitModal(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            let data = {
             amount:this.formRole.amount,
             image:this.formRole.image,
             bank_card:this.formRole.bank_card,
             company:this.formRole.company
            }
            this.$post('/merchant/pay',data).then(res => {
              console.log(res,'充值');
              if(res.code == 0){
                // this.$Message.success(res.msg);
                this.show = false;
                this.imageUrl='';
                this.resetValidate('formRole');
                this.formRole.bank_card = '';
                this.formRole.company = '';
                this.formRole.amount = '';
                this.$Message.success("充值完成");
                this.getList(this.url)
              }else{
                this.$Message.error(res.msg);
                this.show = false;
                this.resetValidate('formRole');
              }
            })

          }

        })
      },
      handleUpload(file){
        console.log(file,'file');
        this.file = file;
        return true;
      },
      handleSuccess (res, file) {
        console.log(res,'res')
        this.formRole.image = res.data.url;
        this.imageUrl =  res.data.url;
        // console.log(this.formRole.image);
        this.$refs.formRole.validateField('image');
        this.$Message.success('上传成功')
      },
      handleError(error){
        console.log(error,'error');
      },
      handleMaxSize (file) {
        this.$Message.warning('文件大小不能超过2M')
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
.viewImg{
  overflow: auto;
  img{
    width:100%;
  }
}
/deep/ .ivu-input[disabled]{
  color:#666;
}
/deep/ .ivu-table-cell{
  padding-left:5px;
  padding-right:5px;
}
/deep/ .ivu-input-number-handler-wrap{
  display: none
}
/deep/ .ellipsis{
  width:100px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
